{% extends 'base.html' %}
{% block title %}
    逐梦之家
{% endblock %}
{% block link %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../../static/css/side.css">

{% endblock %}

{% block content %}

    <!-- 文章分类 -->
    <div class="container father">


        <div class="row">

            <div class="col-md-9 col-12 col-sm-12 col-lg-9">
                <!-- 轮播图代码 -->
                <div class="slideshow">
                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="../../static/image/img_1.png"
                                     class="d-block w-100 img-fluid"
                                     alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="../../static/image/meinv5.jpg"
                                     class="d-block w-100 img-fluid"
                                     alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="../../static/image/meizi1.jpg"
                                     class="d-block w-100 img-fluid"
                                     alt="...">
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"
                                data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"
                                data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </button>
                    </div>
                </div>
                <!--分类条-->
                <div class="direction">
                    <div class="content-direction">
                        <div class="active0"><a href="/">最新发布</a></div>
                        <div><a href="/category/2-1">Python技术</a></div>
                        <div><a href="/category/3-1">Java技术</a></div>
                        <div><a href="/category/4-1">爬虫教程</a></div>
                        <div><a href="/category/5-1">web设计</a></div>
                        <div><a href="/category/1-1">我的世界</a></div>
                    </div>
                </div>


                <!-- 文章列表 -->
                <div class="index">
                    {% for question in questions %}
                        <div class="col-12 row article-list">
                            <div class="col-sm-3 col-3 thumb d-none d-sm-block">
                                <img src="{{ url_for('static',filename = 'uploads/'+ question.cover) }}"
                                     class="img-fluid" style="border-radius: 10px;margin-left: 10px;"/>
                            </div>
                            <div class="col-sm-9 col-xs-12 detail">
                                <div class="title"><a
                                        href="{{ url_for('index.detail',id = question.id) }}">{{ question.title }}</a>
                                </div>
                                <div class="info">
                                    作者：{{ question.author.username }}&nbsp;&nbsp;&nbsp;类别：{{ question.category.name }}&nbsp;&nbsp;&nbsp;
                                    日期：{{ question.create_time }}&nbsp;&nbsp;&nbsp;阅读：{{ question.readcount }} 次&nbsp;&nbsp;&nbsp;消耗积分：{{ question.credit }}
                                    分
                                </div>
                                <div class="intro" id="detail">
                                    {{ question.detail|striptags|truncate(80) }}
                                </div>
                                <div class="data-article">
                                    {% if question.id in like_lst %}
                                        <span id="support" data-article-id= {{ question.id }}><img
                                                src="/static/icon/点赞完.svg" alt="" width="24px" height="24px">&nbsp;&nbsp;&nbsp;{{ question.up }}</span>
                                    {% else %}
                                        <span id="support" data-article-id= {{ question.id }}><img
                                                src="/static/icon/点赞.svg" alt="" width="24px" height="24px">&nbsp;&nbsp;&nbsp;{{ question.up }}</span>

                                    {% endif %}

                                    {% if question.id in dlike_lst %}
                                        <span id="oppose" data-article-id= {{ question.id }}><img
                                                src="/static/icon/点踩完.svg" alt="" width="24px" height="24px">&nbsp;&nbsp;&nbsp;{{ question.down }}</span>
                                    {% else %}
                                        <span id="oppose" data-article-id= {{ question.id }}><img
                                                src="/static/icon/点踩.svg" alt="" width="24px" height="24px">&nbsp;&nbsp;&nbsp;{{ question.down }}</span>
                                    {% endif %}

                                    <span id="comments" data-article-id= {{ question.id }}><img
                                            src="/static/icon/评论.svg" alt="" width="24px" height="24px">&nbsp;&nbsp;&nbsp;{{ question.replycount }}</span>
                                </div>

                            </div>
                        </div>
                    {% endfor %}


                </div>
                <div class="col-12 paginate">
                    {% if page==1 %}
                        <a href="/page/1"><span>上一页</span></a>
                    {% else %}
                        <a href="/page/{{ page-1 }}"><span>上一页</span></a>
                    {% endif %}

                    {% for i in range(total) %}
                        <a href="/page/{{ i + 1 }}"><span>{{ i + 1 }}</span></a>

                    {% endfor %}
                    {% if page ==total %}
                        <a href="/page/{{ total }}"><span>下一页</span></a>
                    {% else %}
                        <a href="/page/{{ page + 1 }}"><span>下一页</span></a>

                    {% endif %}


                </div>
            </div>


            <!-- 侧边栏 -->
            {% include 'side.html' ignore missing %}


        </div>
    </div>

{% endblock %}

{% block bottom %}
    <script src="/static/js/article/blog.js"></script>

{% endblock %}

